@inject IJSRuntime JsRuntime

<DocMatIconButton></DocMatIconButton>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        @using Microsoft.AspNetCore.Components


        <h4 class="mat-subtitle1">Simple use</h4>
        <MatIconButton Icon="favorite" OnClick="@RunOnClick"></MatIconButton>

        <h5 class="mat-subtitle1">With Font-Awesome Icons</h5>
        <MatIconButton>
            <i class="fa fa-github" aria-hidden="true"></i>
        </MatIconButton>

        <h5 class="mat-subtitle1">With href link</h5>
        <MatIconButton Link="https://github.com/BlazorComponents/MatBlazor">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>

        <h5 class="mat-subtitle1">With href link</h5>
        <MatIconButton Link="/Checkbox" Icon="refresh"></MatIconButton>

        <h5 class="mat-subtitle1">With ForceLoad href link</h5>
        <MatIconButton Link="/Checkbox" ForceLoad="true" Icon="refresh"></MatIconButton>

        <h5 class="mat-subtitle1">With Font-Awesome Icons and Link in a new Window  - Target Defined</h5>
        <MatIconButton Link="https://github.com/BlazorComponents/MatBlazor" Target="_blank">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>

        <h5 class="mat-subtitle1">Internal Link in a new Window - Target Defined</h5>
        <MatIconButton Link="/TextField" Target="_blank">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>


        @code
        {

            public void RunOnClick(MouseEventArgs e)
            {
                JsRuntime.InvokeAsync<object>("window.alert", "Test");
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        @using Microsoft.AspNetCore.Components


        <h4 class=""mat-subtitle1"">Simple use</h4>
        <MatIconButton Icon=""favorite"" OnClick=""@RunOnClick""></MatIconButton>

        <h5 class=""mat-subtitle1"">With Font-Awesome Icons</h5>
        <MatIconButton>
            <i class=""fa fa-github"" aria-hidden=""true""></i>
        </MatIconButton>

        <h5 class=""mat-subtitle1"">With href link</h5>
        <MatIconButton Link=""https://github.com/BlazorComponents/MatBlazor"">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>

        <h5 class=""mat-subtitle1"">With href link</h5>
        <MatIconButton Link=""/Checkbox"" Icon=""refresh""></MatIconButton>

        <h5 class=""mat-subtitle1"">With ForceLoad href link</h5>
        <MatIconButton Link=""/Checkbox"" ForceLoad=""true"" Icon=""refresh""></MatIconButton>

        <h5 class=""mat-subtitle1"">With Font-Awesome Icons and Link in a new Window  - Target Defined</h5>
        <MatIconButton Link=""https://github.com/BlazorComponents/MatBlazor"" Target=""_blank"">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>

        <h5 class=""mat-subtitle1"">Internal Link in a new Window - Target Defined</h5>
        <MatIconButton Link=""/TextField"" Target=""_blank"">
            <MatIcon>@MatIconNames.Touch_app</MatIcon>
        </MatIconButton>


        @code
        {

            public void RunOnClick(MouseEventArgs e)
            {
                JsRuntime.InvokeAsync<object>(""window.alert"", ""Test"");
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Toggle Icon Button</h5>
<DemoContainer>
    <Content>
        <h5 class="mat-subtitle1">Toggled</h5>
        <MatIconButton Icon="favorite_border" ToggleIcon="favorite">
        </MatIconButton>

        <h5 class="mat-subtitle1">Set Toggled</h5>
        <MatIconButton Icon="favorite_border" ToggleIcon="favorite" Toggled="true">
        </MatIconButton>

        <h5 class="mat-subtitle1">Bind Toggled: @toggledValue</h5>
        <MatIconButton Icon="favorite_border" ToggleIcon="favorite" @bind-Toggled="@toggledValue">
        </MatIconButton>



        @code
        {
            bool toggledValue;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <h5 class=""mat-subtitle1"">Toggled</h5>
        <MatIconButton Icon=""favorite_border"" ToggleIcon=""favorite"">
        </MatIconButton>

        <h5 class=""mat-subtitle1"">Set Toggled</h5>
        <MatIconButton Icon=""favorite_border"" ToggleIcon=""favorite"" Toggled=""true"">
        </MatIconButton>

        <h5 class=""mat-subtitle1"">Bind Toggled: @toggledValue</h5>
        <MatIconButton Icon=""favorite_border"" ToggleIcon=""favorite"" @bind-Toggled=""@toggledValue"">
        </MatIconButton>



        @code
        {
            bool toggledValue;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>